<template>
    <div class="hello">
        <h1>{{ count }}</h1>
        <h3>{{ localComputed }}</h3>
        <!-- <h3>{{ countLocalState }}</h3> -->
        <!--<h3>{{ localComputed }}</h3>-->
        <el-button type="primary" @click="addEvent">+</el-button>
        <el-button type="primary" @click="decEvent">-</el-button>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        //计算属性
        // computed: {
        //    count() {
        //        return this.$store.state.count;
        //    },
        // },

        //mapState
        // computed: mapState({
        //     //count: state => state.count,
        //     //countAlias: 'count',
        //     //为了能够使用 this获得局部状态，必须使用常规函数
        //     countLocalState(state) {
        //         return state.count + this.localCount;
        //     }
        // }),
        //当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组
        // computed: mapState([
        //     'count'
        // ]),



        //对象展开运算符
        computed: {
            localComputed() {
                return 666;
            },
            ...mapState({
                count: state => state.count
            }),
        },
        data() {
            return {
                localCount: 123,
            }
        },
        methods: {
            addEvent() {
                this.$store.commit('increment');
            },
            decEvent() {
                this.$store.commit('decrement');
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
